<template>
    <div>
      <pstep :stepData="stepData" :doneNum="doneNum"  style="margin-bottom: 20px;"></pstep>
      <pform ref="form" :model="form" lw="150">
        <el-form-item label="区域">
          <el-select style="width:233px;" v-model="form.field1" placeholder="请选择区域">
            <el-option label="东南中心" value="dn"></el-option>
            <el-option label="南方中心" value="nf"></el-option>
            <el-option label="北方中心" value="bf"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实例名称">
          <el-input v-model="form.field2" placeholder="请输入" style="width: 233px;"></el-input>
        </el-form-item>
        <el-form-item label="数据库引擎">
          <el-radio-group v-model="form.field3">
            <el-radio-button label="Oracle"></el-radio-button>
            <el-radio-button label="MySQL"></el-radio-button>
            <el-radio-button label="PostgreSql"></el-radio-button>
            <el-radio-button label="SqlServer"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据库版本">
          <el-checkbox v-show="form.field3=='Oracle'" v-model="form.field4">12c</el-checkbox>
          <el-checkbox v-show="form.field3=='MySQL'" v-model="form.field4a">5.6</el-checkbox>
          <el-checkbox v-show="form.field3=='MySQL'" v-model="form.field4b">5.7</el-checkbox>
          <el-checkbox v-show="form.field3=='PostgreSql'" v-model="form.field4c">9.5</el-checkbox>
          <el-checkbox v-show="form.field3=='PostgreSql'" v-model="form.field4d">9.6</el-checkbox>
          <el-checkbox v-show="form.field3=='SqlServer'" v-model="form.field4e">2014企业版</el-checkbox>
        </el-form-item>
        <el-form-item label="实例类型">
          <el-radio-group v-model="form.field5">
            <el-radio-button label="主备"></el-radio-button>
            <el-radio-button label="单机"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="存储类型">
          <el-radio-group v-model="form.field6">
            <el-radio-button label="SSD云盘"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主可用区">
          <el-select style="width:233px;" v-model="form.field7" placeholder="请选择区域">
            <el-option label="可用区1" value="dn"></el-option>
            <el-option label="可用区4" value="nf"></el-option>
            <el-option label="可用区6" value="bf"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备可用区">
          <el-select style="width:233px;" v-model="form.field8" placeholder="请选择区域">
            <el-option label="可用区1" value="dn"></el-option>
            <el-option label="可用区4" value="nf"></el-option>
            <el-option label="可用区6" value="bf"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时区">
          <el-select style="width:233px;" v-model="form.field9" placeholder="请选择区域">
            <el-option label="(UTC+08:00)北京，重庆，香港，乌鲁木齐" value="dn"></el-option>
            <el-option label="(UTC+08:00)吉隆坡，新加坡" value="nf"></el-option>
            <el-option label="(UTC+09:00)首尔" value="bf"></el-option>
          </el-select>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="性能规格">
          <el-radio-group v-model="form.field10">
            <el-radio-button label="通用型"></el-radio-button>
          </el-radio-group>
          <div style="line-height: 1;padding-top: 20px;">
            <el-table
              size="mini"
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="radio"
                label=""
                width="60">
                <template slot-scope="scope">
                  <el-radio v-model="scope.row.radio"></el-radio>
                </template>
              </el-table-column>
              <el-table-column
                prop="ggmc"
                label="规格名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="jyljs"
                label="建议连接数"
                width="180">
              </el-table-column>
              <el-table-column
                prop="tps"
                label="TPS|QPS">
              </el-table-column>
              <el-table-column
                prop="ipv"
                label="IPv6">
              </el-table-column>
            </el-table>
            <div style="padding-top: 20px;">
              <span style="padding-right: 30px;">当前规格</span>
              <span>2 vCPUS | 8GB（通用型），建议连接数：2,5000, TPS|QPS:571|11,437</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="存储空间">
          <el-input-number size="small" style="width:215px" v-model="form.field11" :min="1" :max="200"></el-input-number>GB
        </el-form-item>
        <el-form-item label="磁盘加密">
          <el-radio-group v-model="form.field12">
            <el-radio :label="1">加密</el-radio>
            <el-radio :label="0">不加密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider></el-divider>
        <div class="flex-align-center" style="justify-content: space-between;">
          <el-form-item label="虚拟私有云">
            <div>
              <el-select style="width:233px;margin-right: 50px;" v-model="form.field125" placeholder="请选择虚拟私有云">
                <el-option label="可用区1" value="dn"></el-option>
                <el-option label="可用区4" value="nf"></el-option>
                <el-option label="可用区6" value="bf"></el-option>
              </el-select>
              <el-select style="width:233px;" v-model="form.field125" placeholder="请选择子网">
                <el-option label="可用区1" value="dn"></el-option>
                <el-option label="可用区4" value="nf"></el-option>
                <el-option label="可用区6" value="bf"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <div class="flex-align-center" style="margin-bottom: 20px;">
            <span>IP地址:</span>
            <div class="flex-align-center">
              <el-input v-model="form.input" placeholder="请输入" style="width: 90px;margin-right: 10px;margin-left: 10px;"></el-input>-
              <el-input v-model="form.input" placeholder="请输入" style="width: 90px;margin-right: 10px;margin-left: 10px;"></el-input>-
              <el-input v-model="form.input" placeholder="请输入" style="width: 90px;margin-right: 10px;margin-left: 10px;"></el-input>-
              <el-input v-model="form.input" placeholder="请输入" style="width: 90px;margin-left: 10px;"></el-input>
            </div>
          </div>
        </div>
        <el-form-item label="安全组">
          <el-select style="width:233px;" v-model="form.field12" placeholder="请选择安全组">
            <el-option label="可用区1" value="dn"></el-option>
            <el-option label="可用区4" value="nf"></el-option>
            <el-option label="可用区6" value="bf"></el-option>
          </el-select>
          <el-icon class="el-icon-refresh" style="font-size: 20px;margin: 0 12px;cursor: pointer;"></el-icon>
          <el-button type="text">新建安全组</el-button>
        </el-form-item>
        <el-form-item label="数据库端口">
          <el-input v-model="form.field13" placeholder="默认3306" style="width: 233px;"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="用户名">
          <span>root</span>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.field14" type="password" placeholder="请输入" style="width: 233px;"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.field15" type="password" placeholder="请输入" style="width: 233px;"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="参数模板">
          <el-select style="width:233px;" v-model="form.field16" placeholder="请选择区域">
            <el-option label="Default-MySQL-5.6" value="dn"></el-option>
            <el-option label="Default-MySQL-5.7" value="nf"></el-option>
            <el-option label="Default-Microsoft SQL Server-2014_SE" value="bf"></el-option>
          </el-select>
          <el-icon class="el-icon-refresh" style="font-size: 20px;margin: 0 12px;cursor: pointer;"></el-icon>
        </el-form-item>
      </pform>
  
      <div class="button-group"><el-button type="primary" @click="onCreat()">立即创建</el-button></div>
    </div>
  </template>
  
  <script>
  import pstep from '@/components/publicStep'
  
  export default {
    name: 'databaseForm',
    components: {pstep},
    data() {
      return {
        stepData:[{num:1, nameIn:'1', nameOut:'基础配置'}],
        doneNum: 1,
        form: {
          field3: 'Oracle',
          field4: true,
          field5: '主备',
          field6: 'SSD云盘',
          field10: '通用型',
          field11: '1',
          field12: '1',
          field16: 'dn',
        },
        versionMap: {},
        tableData: [
          {ggmc: '8 vCPUs | 64 GB', jyljs: '18,000', tps: '600 | 11,111', ipv: '不支持', radio: true},
          {ggmc: '16 vCPUs | 128 GB', jyljs: '2,000', tps: '1600 | 111,111', ipv: '不支持', radio: false},
          {ggmc: '32 vCPUs | 256 GB', jyljs: '4,000', tps: '5600 | 611,111', ipv: '不支持', radio: false},
        ]
      }
    },
    methods: {
      onCreat() {
        this.$router.push({
          path: '/passsucserver/releationalSql'
        })
      }
    }
  }
  </script>
  
  <style scoped lang="less">
    .flex-align-center {
      display: flex;
      align-items: center;
    }
    .button-group {
      display: flex;
      justify-content: flex-end;
      padding: 20px;
    }
    /deep/ .el-table th.el-table__cell {
      background: #f2f2f2 !important;
    }
  </style>
  